<template>
  <div class="page">
    <van-button>个人主页</van-button>
    <div class="padding">
      <van-field v-model="formData.text" label="姓名"/>
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="formData.tel" type="text" label="手机号"/>
      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field v-model="formData.number" type="text" label="数字"/>
      <!-- 输入密码 -->
      <van-field v-model="formData.password" type="password" label="密码"/>
      <div class="padding-tb-lg">
        <van-button round block type="info" @click="onSubmit">
          提交
        </van-button>
      </div>
    </div>
  </div>
</template>

<script type="es6">
let validator = {
  "text": {
    required: {msg: "请输入姓名哦？？？"},
    type: "userName",
    name: "姓名"
  },
  "tel": {
    name: "手机号",
    msg: "你好手机号有误，全局提示",
    required: {msg: "请输入手机号"},
    pattern: [{
      value: /^1[3456789]\d{9}$/
    }, {
      value: /^[\u0391-\uFFE5]+$/,
      msg: "只能输入中文"
    }],
    /*callback: function (data, self) {
      let a = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
          b = /^1[3456789]\d{9}$/;
      if(a.test(data.tel) || b.test(data.tel)){
        return false;
      } else {
        return "请输入手机号或者邮箱";
      }
    },*/
    // pattern: /^[\u0391-\uFFE5]+$/,
    // pattern: {
    //   value: [/^1[3456789]\d{9}$/,/^1[3456789]\d{9}$/,/^1[3456789]\d{9}$/],
    //   msg: "输入有误"
    // },
    // pattern: [/^[\u0391-\uFFE5]+$/],


  },
  "number": {
    required: {msg: "请输入数字"},
    type: "number",
    name: "数字"
  },
  "password": {
    required: {msg: "请输入联系方式"},
    name: "联系方式"
  }
}
export default {
  name: "",
  components: {},
  data() {
    return {
      formData: {
        text: "asdfsd",
        tel: "1822447698",
        number: "12",
        password: "a",
      }
    };
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      let formData = this.formData;
      let self = this;
      let bool = this.$utils.formValidator(formData, validator, self);

      console.log(bool);
    },
  }
}
</script>

<style lang="scss" scoped>

</style>